<script setup>
defineProps({
  /** 自定义 */
  pagination: {
    type: Object,
    default: () => ({
      page: 1,
      limit: 10,
      total: 0,
      currentChange: () => {},
      sizeChange: () => {}
    })
  },
  /** ElementPlus */
  background: { type: Boolean, default: true },
  layout: {
    type: String,
    default: 'prev, pager, next, sizes'
  },
  pagerCount: {
    type: Number,
    default: 7
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50, 100]
  },
  hideOnSinglePage: Boolean
})
</script>

<template>
  <el-pagination
    v-if="pagination.total > 0"
    :background="background"
    :layout="layout"
    :page-sizes="pageSizes"
    :pager-count="pagerCount"
    :hide-on-single-page="hideOnSinglePage"
    :page-size="pagination.limit"
    :total="pagination.total"
    :current-page="pagination.page"
    @current-change="pagination.currentChange"
    @size-change="pagination.sizeChange"
  />
</template>

<style lang="less" scoped>
.el-pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
  :deep(.el-pager li) {
    min-width: 30px;
    height: 30px;
    line-height: 30px;
  }
}
</style>
